<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<topLogo :isTitle="false"></topLogo>
			<view class="home_top">
				<view class="wrap">
					<uni-row>
						<uni-col :span="10">
							<view class="topleft" @click="$public.switchTabTo('/pages/center/index')"
								v-if="$store.state.userInfo.nickName">
								<image src="../../static/sj_sqlocation.png" mode="scaleToFill" class="image"></image>
								请登录
							</view>
							<view class="topleft">
								<image src="../../static/sj_sqlocation.png" mode="scaleToFill" class="image"></image>
								<text v-if="plotName" @click="getPlotList">{{plotName}}</text>
								<text v-else @click="getPlotList">未绑定小区</text>
							</view>
						</uni-col>
						<uni-col :span="12">
							<view class="ssdiv" @click="$public.navto('search')">
								<view class="ss">
									<image class="ssimg" src="/static/sj_sl_ssimg.png"></image>
									搜索
								</view>
							</view>
						</uni-col>
						<uni-col :span="2">
							<view class="topright" @click="$public.navto('/pages/news/list',{columnId:7})">
								<image src="../../static/sj_tzimg.png" mode="scaleToFill" class="image"></image>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="banner_div">
				<view class="wrap">
					<uni-swiper-dot class="uni-swiper-dot-box" :info="banner" mode="round" :current="current"
						:dots-styles="swiperData">
						<swiper class="swiper-box" :current="swiperDotIndex" @change="change" autoplay="auto">
							<swiper-item v-for="(item, index) in banner" :key="index"
								@click="item.url ? $public.navto(item.url) : ''">
								<image mode="scaleToFill" class="swiperimage" :src="$public.imgageUrl(item.images)"></image>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
			</view>
			<view class="wrap">
				<view class="tz-div" v-for="(item ,index) in tzList" :index="index" :key="index" v-if="index==0">
					<view class="tz-left" @click="$public.navto('/pages/news/list',{columnId:7})">
						<image src="../../static/sj_tztitle.png" mode="scaleToFill" class="image"></image>
					</view>
					<view class="tz-right" @click="$public.navto('/pages/news/detail',{articleId:item.articleId})">
						<view class="tz-title">
							{{item.title}}
							<image src="../../static/sj_tzjt.png" mode="scaleToFill" class="image"></image>
						</view>
						<view class="tz-abstract">
							{{item.remark}}
						</view>
					</view>
				</view>
			</view>
			<view class="wrap ">
				<view class="cygn-div">
					<jxwTitle title="常用功能"></jxwTitle>
					<view class="material-column">
						<uni-grid :column="3" :show-border="false" :square="false">
							<uni-grid-item v-for="(item,index) in changYongData" :key="index">
								<view class="grid-item-box" v-if="item.title=='社区团购'" @click="$public.navto('/pages/shangquan/shequtuangou')">
									<view class="image-div">
										<image class="image" :src="$public.imgageUrl(item.images)" mode="aspectFit" />
									</view>
									<view class="text">{{item.title}}</view>
								</view>
								<view class="grid-item-box" v-else-if="item.title=='积分商城'" @click="$public.navto('/pages/mall/index')">
									<view class="image-div">
										<image class="image" :src="$public.imgageUrl(item.images)" mode="aspectFit" />
									</view>
									<view class="text">{{item.title}}</view>
								</view>
								<view class="grid-item-box" v-else-if="item.title=='大牌优选'" @click="$public.navto('/pages/daPai/daPai')">
									<view class="image-div">
										<image class="image" :src="$public.imgageUrl(item.images)" mode="aspectFit" />
									</view>
									<view class="text">{{item.title}}</view>
								</view>
								<view class="grid-item-box" v-else @click="$public.gotoMiniProgram(item.json.appid,item.json.appurl)">
									<view class="image-div">
										<image class="image" :src="$public.imgageUrl(item.images)" mode="aspectFit" />
									</view>
									<view class="text">{{item.title}}</view>
								</view>
							</uni-grid-item>
						</uni-grid>
					</view>
				</view>

			</view>

		</view>
		<uni-popup ref="plotList">
			<view class="sm-div">
				<view class="sm-div-bg ">
					<view class="sm-list" v-for="(item,index) in plotList" :key="index">
						<text>{{item.name}}<text class="huangzi">约{{item.juli}}km</text></text>

						<text @click="bangdingPlot(item)">绑定</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="tanChuang">
			<view class="tc-div">
				<view class="tc-div-bg">
					<view class="sm-list" v-for="(item,index) in tcData" :key="index" v-if="index<1">
						<image :src="$public.imgageUrl(item.images)" mode="aspectFit" class="sm-image" @click="openGongNeng(item)">
						</image>
					</view>
					<view class="">
						<uni-icons type="close" size="50" color="#fff" @click="$refs.tanChuang.close()"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
		<official-account class="topOfficial"></official-account>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				videoUrl: "",
				banner: [],
				notice: "",
				productList: [],
				swiperData: {
					selectedBackgroundColor: "#1ca7ec",
					selectedBorder: "#1ca7ec",
					backgroundColor: "#d3d3d3",
					border: "#d3d3d3",
				},
				changYongData: [],
				swiperDotIndex: 0,
				current: 0,
				tzList: [],
				plotList: [],
				plotName: "",
				tcData: []
			}
		},
		async onLoad() {
			this.$public.showLoading()
			this.getBanner();
			this.getChangYong();
			// this.plotName = this.$store.state.userInfo.plotName
			this.getTanChuang()
		},
		onShow() {
			this.getTongZhi()
			let that = this
			setTimeout(function() {
				that.plotName = that.$store.state.userInfo.plotName
			}, 1000)
			// console.log("name",this.$store.state.userInfo.plotName)

			// this.$refs.plotList.open()
			// let that = this
			// uni.showModal({
			// 	title: "温馨提示",
			// 	content: "该功能正在开发中",
			// 	showCancel: false,
			// 	success: function(res) {
			// 		that.$public.switchTabTo("/pages/gongyi/index")
			// 	}
			// })
		},
		methods: {
			...mapMutations(['updatePlot']),
			getTanChuang() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 32,
					tj: ""
				}).then((res) => {
					console.log("getTanChuang res", res)
					let data = res.data;
					if (data.code == 0) {
						data.data.forEach(item => {
							item.json = JSON.parse(item.remark)
						})
						this.tcData = data.data
						if (this.tcData.length > 0) {
							this.$refs.tanChuang.open()
						}
					}
				})
			},
			getBanner() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 1,
					tj: ""
				}).then((res) => {
					console.log("getBanner res", res)
					let data = res.data;
					if (data.code == 0) {
						data.data.forEach(item => {
							item.showVideo = false
						})
						that.banner = data.data
					}
					uni.hideLoading();
				})
			},
			openBanner(item, index) {
				if (item.files) {
					this.banner[index].showVideo = true
					this.videoUrl = item.files
					// this.$refs.videodiv.open("center")
					return false;
				}
				if (item.keyword) {
					if (item.keyword.indexOf("serviceId-") >= 0) {
						let serviceId = item.keyword.split("-")[1];
						this.$public.navto("/pages/service/detail", {
							serviceId: serviceId
						})
					} else {
						let articleId = item.keyword.split("-")[1];
						this.$public.navto("/pages/news/detail", {
							articleId: articleId
						})
					}
				}
			},
			getTongZhi() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 7,
					tj: 0
				}).then((res) => {
					console.log("getTongZhi res", res)
					let data = res.data;
					if (data.code == 0) {
						that.tzList = data.data
					}
				})
			},
			getChangYong() {
				let that = this
				this.$public.htmlPost("/api/getArticle", {
					columnId: 8,
					tj: 0
				}).then((res) => {
					console.log("getChangYong res", res)
					let data = res.data;
					if (data.code == 0) {

						that.changYongData = data.data
						that.changYongData.forEach(item => {
							item.json = JSON.parse(item.remark)
						})
					}
					console.log("changYongData:", that.changYongData)
				})
			},
			change(e) {
				this.current = e.detail.current
			},
			bangdingPlot(item) {
				let that = this
				uni.showModal({
					title: "温馨提示",
					content: `确定绑定小区 ${item.name} ?`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.addUserPlot(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			getPlotList() {
				let that = this
				this.$public.getLocation()
				let location = uni.getStorageSync('setLocation');
				if (location) {
					this.myLocation = location
				}
				this.$public.htmlPost("/api/getPlotList").then((res) => {
					console.log("getPlotList res", res)
					let data = res.data;
					if (data.code == 0) {
						that.plotList = []
						data.data.forEach(item => {
							let arr = item.bak1.split(",");
							if (item.bak1.indexOf("，") >= 0) {
								arr = item.bak1.split("，");
							}
							if (arr.length > 1) {
								item.lat = arr[0];
								item.lng = arr[1];
								item.juli = that.$public.distance(item.lat, item.lng, that.myLocation.lat, that.myLocation.lng)
							} else {
								item.lat = 27.993864;
								item.lng = 120.699269;
								item.juli = that.$public.distance(item.lat, item.lng, that.myLocation.lat, that.myLocation.lng)
							}
							that.plotList.push(item)
						})
						that.plotList.sort(function(a, b) {
							return a.juli - b.juli
						});

						// that.plotList = data.data
						that.$refs.plotList.open()
					}
				})
			},
			addUserPlot(item) {
				let that = this
				this.$public.htmlPost("/api/addUserPlot", {
					plotId: item.plotId
				}).then((res) => {
					console.log("addUserPlot res", res)
					let data = res.data;
					if (data.code == 0) {
						that.$api.msg(`您已成功绑定 ${item.name} `)
						that.updatePlot({
							plotId: item.plotId,
							plotName: item.name
						})
						that.plotName = item.name
						// console.log("plotName", that.$store.state.userInfo.plotName)
						that.$refs.plotList.close()
					}
				})
			},
			openGongNeng(item) {
				if (item.url.length > 10) {
					this.$public.navto(item.url)
				} else {
					if (!item.json.appid)
						this.$api.msg("暂未开放")
					else
						this.$public.gotoMiniProgram(item.json.appid, item.json.appurl)
				}
			}
			// getLocation() {
			// 	let that = this
			// 	uni.getLocation({
			// 		type: 'gcj02',
			// 		success: function(res) {
			// 			let longitude = res.longitude
			// 			let latitude = res.latitude
			// 			console.log('当前位置的经度：' + res.longitude);
			// 			console.log('当前位置的纬度：' + res.latitude);
			// 			that.$public.getAddress(longitude, latitude)
			// 				.then((res) => {
			// 					let params = {
			// 						city: res.result.address_component.city,
			// 						name: res.result.address_reference.landmark_l2.title,
			// 						lng: longitude,
			// 						lat: latitude,
			// 					}
			// 					console.log('params：' + params);
			// 					uni.setStorage({
			// 						key: 'setLocation',
			// 						data: params
			// 					})
			// 				})
			// 				.catch((e) => {
			// 					console.log(e, '解释地址失败')
			// 				})
			// 		},
			// 		fail(err) {
			// 			console.log(err, '获取经纬度失败')
			// 		},

			// 	});
			// },
		},
		onShareAppMessage(res) {
			console.log("发送给朋友", this.$store.state.userInfo.id)
			return {
				title: '温邻圈',
				path: '/pages/index/index', // 全局分享的路径，比如 首页
				imageUrl: '/static/fenxianglogo.jpg',
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			// console.log("分享到朋友圈")
			return {
				title: '温邻圈',
				// path: this.share.path,
				// query: query,
				// query: "userId=" + this.$store.state.userInfo.id,
				imageUrl: '/static/fenxianglogo.jpg',
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-color: #fff;
		background: url(#{$imageUrl}/webbg.png) top center no-repeat;
		background-size: 100% auto;

		.wrap {
			padding: $uni-wrap-padding;
		}

		.triangle-down {
			width: 0;
			height: 0;
			border-left: 10rpx solid transparent;
			border-right: 10rpx solid transparent;
			border-top: 12rpx solid #94bbe5;
		}

		.home_top {
			// background: $uni-wl-blue;
			color: #fff;
			height: 100rpx;
			line-height: 100rpx;
			overflow: hidden;

			.topleft {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;

				.image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				.addtext {
					margin: 0 10rpx;
					color: #ffea06;
				}
			}

			.ssdiv {
				// border: 1rpx solid #2779cc;
				// background: #0f5fb2;
				border-radius: 50rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				// margin-top: 20rpx;
				width: 100%;

				.ss {
					display: flex;
					width: 100%;
					// justify-content: space-between;
					align-items: center;
					padding: 0 35rpx;
					color: #666666;
					height: 72rpx;
					background: rgba(255, 255, 255, 0.3);
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					border: 1rpx solid #FFFFFF;
					font-size: 28rpx;

					.ssimg {
						width: 36rpx;
						height: 36rpx;
						margin-right: 8rpx;
					}
				}
			}

			.topright {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;

				.image {
					width: 48rpx;
					height: 48rpx;
				}
			}

		}

		.banner_div {
			margin: 30rpx 0;

			.swiper-box {
				height: 344rpx;
			}

			.swiperimage {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				// overflow: hidden;
			}

			.videocss {
				width: 100%;
				height: 385rpx;
			}
		}

		.tz-div {
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: url(#{$imageUrl}/tzbg.png) top center no-repeat;
			background-size: 100% auto;
			height: 180rpx;

			.tz-left {
				margin-right: 30rpx;

				.image {
					width: 74rpx;
					height: 72rpx;
				}
			}

			.tz-right {
				.tz-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 10rpx;

					.image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.tz-abstract {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}

		.cygn-div {
			// height: 704rpx;
			background: url(#{$imageUrl}/sqcybg.png) top center no-repeat #fff;
			background-size: 100% auto;
			border-radius: 16rpx;
			padding: 30rpx 48rpx;
			margin-top: 30rpx;
		}

		.app-title {
			margin-bottom: 0;
		}

		.material-column {
			.image-div {
				// width: 116rpx;
				// height: 116rpx;
				// background: #f3f3f3;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 40rpx auto 10rpx;

				.image {
					width: 136rpx;
					height: 136rpx;
				}
			}

			.text {
				text-align: center;
				width: 130rpx;
				color: #666666;
				margin: 0 auto;
				// line-height: 2;
				font-size: 28rpx;
			}
		}

	}

	.sm-div {

		padding: $uni-wrap-padding;
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;

		.sm-div-bg {
			// margin: 40rpx;
			min-width: 500rpx;
			max-height: 700rpx;
			overflow-y: auto;

			.sm-list {
				margin-bottom: 20rpx;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				align-items: center;
				height: 80rpx;
				display: flex;
				justify-content: space-between;

				.huangzi {
					font-size: 24rpx;
					color: #666666;
					padding-left: 10rpx;
				}

			}
		}
	}

	.tc-div {
		padding: 40rpx;

		.tc-div-bg {
			text-align: center;

			.sm-image {
				width: 600rpx;
				height: 600rpx;
			}
		}
	}

	.topOfficial {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>